<template>
  <div id="app">
    <!-- 只在非 login 页面显示菜单 -->
    <el-menu v-if="!$route.meta.hideMenu" class="el-menu-demo" mode="horizontal" :ellipsis="false">
      <div class="left-menu">
        <img src="/img/logo.png" alt="Logo" style="height: 60px;" />
        <div class="text-container">
          <div class="line" style="font-size: 20px" @click="goToRoot">中南林业科技大学</div>
          <div class="line" style="font-size: 12px">&nbsp;&nbsp;&nbsp;&nbsp;软件协会代码竞赛系统</div>
        </div>
      </div>
      <div class="menu-items">
        <el-menu-item index="1" style="font-size: 16px" @click="goToWebCode">
          <el-icon :size="size" :color="color">
            <Mouse />
          </el-icon>我的代码
        </el-menu-item>
        <el-menu-item index="2" style="font-size: 16px" @click="goToProblem">
          <el-icon :size="size" :color="color">
            <Cpu />
          </el-icon>我的题库
        </el-menu-item>
        <el-menu-item index="3" style="font-size: 16px" @click="goToCompetition">
          <el-icon :size="size" :color="color">
            <Coin />
          </el-icon> 我的竞赛
        </el-menu-item>
        <el-menu-item index="4" style="font-size: 16px" @click="goToManager">
          <el-icon :size="size" :color="color">
            <Postcard />
          </el-icon> 题库管理
        </el-menu-item>
      </div>
      <div class="flex-grow"/>
      <div style="padding-right: 20px;padding-top: 10px">
        <el-button v-if="!isTokenValid" type="primary" plain size="large" @click="login">登录</el-button>
      </div>
    </el-menu>
    <!-- 页面内容 -->
    <div class="background">
      <div class="main">
        <RouterView />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Coin, Cpu, Mouse, Postcard } from "@element-plus/icons-vue";
import axios from 'axios';
import { API_BASE_URL } from '@/config.ts'; // 确保这个路径正确

const router = useRouter();
const route = useRoute();
const isTokenValid = ref(false);
const size = ref(20);
const color = ref('#409EFF');

// 添加 checkToken 函数定义
const checkToken = async () => {
  const token = localStorage.getItem('token');

  // 如果没有 token，直接设置为无效
  if (!token) {
    isTokenValid.value = false;
    return;
  }

  try {
    // 尝试用 token 调用验证接口
    const response = await axios.get(`${API_BASE_URL}/verifyToken`, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });

    // 根据响应设置 token 有效性
    isTokenValid.value = response.data.code === 0;

    console.log('Token verification result:', isTokenValid.value);
  } catch (error) {
    console.error('Token verification failed:', error);
    isTokenValid.value = false;

    // 如果是 401 错误，清除本地存储的 token
    if (axios.isAxiosError(error) && error.response?.status === 401) {
      localStorage.removeItem('token');
    }
  }
};

// 监听 isTokenValid 的变化
watch(isTokenValid, (newVal) => {
  if (!newVal && !route.path.includes('/login')) {
    // 如果 isTokenValid 为 false 且当前不在登录页面，跳转到登录页面
    const currentPath = route.fullPath; // 获取当前页面的完整路径
    router.push({
      path: '/login',
      query: { redirect: currentPath } // 将当前路径作为 redirect 参数
    });
  }
});

// 设置定时器来每3秒检查一次 token
let tokenCheckInterval: ReturnType<typeof setInterval>;

onMounted(() => {
  // 检查 token 的有效性
  checkToken();

  // 每3秒验证 token
  tokenCheckInterval = setInterval(() => {
    // 只在非登录页面检查 token
    if (!route.path.includes('/login')) {
      checkToken();
    }
  }, 3000);
});

onUnmounted(() => {
  // 清除定时器
  if (tokenCheckInterval) {
    clearInterval(tokenCheckInterval);
  }
});

// 页面跳转方法
const goToRoot = () => router.push('/');
const goToWebCode = () => router.push('/WebCode');
const goToProblem = () => router.push('/Problem');
const goToCompetition = () => router.push('/Contest');
const goToManager = () => router.push('/Manager');

// 登录按钮点击事件
const login = () => {
  const currentPath = route.fullPath; // 获取当前页面的完整路径
  router.push({
    path: '/login',
    query: { redirect: currentPath } // 将当前路径作为 redirect 参数
  });
};
</script>


<style scoped>
.el-menu-demo {
  width: 100%; /* 菜单宽度为100% */
  background-color: #FFFFFF; /* 背景颜色，根据需要设置 */
  position: relative; /* 为绝对定位的子元素提供相对参考 */
}

.left-menu {
  display: flex; /* 使用flex布局来更好地控制间隔和对齐 */
  align-items: center; /* 垂直居中对齐图标和文本 */
  position: absolute; /* 绝对定位 */
  left: 20px; /* 左侧间隔 */
}

.left-menu img {
  margin-right: 10px; /* 设置图标和文本之间的间隔 */
}

.left-menu span {
  font-family: 'Arial', sans-serif; /* 修改字体，这里使用Arial，你可以换成其他喜欢的字体 */
  font-size: 16px; /* 设置字体大小，根据需要调整 */
  color: #333; /* 设置字体颜色，这里使用深灰色，你可以根据设计需求更改 */
}

.menu-items {
  position: absolute; /* 绝对定位 */
  left: 50%;
  transform: translateX(-50%); /* 左右居中对齐 */
  display: flex;
}

.background {
  background-color: #f3f3f3; /* 设置浅灰色背景 */
  width: 100%;
  min-height: 94vh;
}

.main {
  display: flex;
  flex-direction: column;
  width: 65%;
  margin: 0 auto;
}

.flex-grow {
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
}
.menu-items .el-menu-item {
  height: 60px;
  line-height: 60px;
}

</style>